import datepicker from 'vue-datepicker'
import extend from 'extend'
import getDatePickerOption from '../../../util/date-picker-option'
import { setMenuType, showMsg, addScreens } from '../../../vuex/action'

const screenDef = {
  id: '',
  title: '',
  type: -1,
  location: '',
  forceexternalbrowser: 0
}

const trim = (inStr) => {
  return inStr.replace(/(^ +)|( +$)/g, '')
}

export default {
  name: 'flash-ad-new',
  components: {
    'vue-date-picker': datepicker
  },
  data() {
    return {
      ad: {
        id: '',
        name: '',
        startTime: '',
        endTime: '',
        deviceType: 1,
        waitTime: 3,
        channel: '',
        screens: [extend(true, {}, screenDef)]
      },
      datePickerOption: getDatePickerOption()
    }
  },
  vuex: {
    actions: {
      xSetMenuType: setMenuType,
      xShowMsg: showMsg,
      xAddScreens: addScreens
    }
  },
  ready() {
    this.xSetMenuType('gao')
  },
  methods: {
    addScreen() {
      if (this.ad.screens.length >= 5) {
        return this.xShowMsg({
          type: 'danger',
          content: '最多添加5张闪屏'
        })
      }

      var newScreen = extend(true, {}, screenDef)
      newScreen.canDelete = true
      this.ad.screens.push(newScreen)
    },
    deleteScreen(idx) {
      this.ad.screens.splice(idx, 1)
    },
    checkValid() {
      var ad = extend(true, {}, this.ad)
      if (trim(ad.name).length === 0) {
        return '请填写任务名'
      } else if (ad.startTime.length === 0) {
        return '请填写开始时间'
      } else if (ad.endTime.length === 0) {
        return '请填写结束时间'
      } else if (ad.endTime <= ad.startTime) {
        return '结束时间必须晚于开始时间'
      } else if (ad.waitTime.length === 0) {
        return '请填写闪屏时长'
      }
    },
    submit() {
      var validMsg = this.checkValid()
      if (validMsg) {
        return this.xShowMsg({
          type: 'danger',
          content: validMsg
        })
      }
      var ad = extend(true, {}, this.ad)
      var formData = new FormData()
      formData.append('id', ad.id)
      formData.append('name', ad.name)
      formData.append('startTime', ad.startTime)
      formData.append('endTime', ad.endTime)
      formData.append('deviceType', +ad.deviceType)
      formData.append('waitTime', +ad.waitTime)
      formData.append('channel', ad.channel)
      var screens = []
      var isAndroid = +ad.deviceType === 2 || +ad.deviceType === 4
      for (let i = 0, len = ad.screens.length; i < len; i++) {
        var screen = {}
        screen.id = ad.screens[i].id
        screen.title = ad.screens[i].title
        screen.type = +ad.screens[i].type
        screen.location = ad.screens[i].location
        screen.forceexternalbrowser = +ad.screens[i].forceexternalbrowser
        var file0 = document.getElementById('file' + i + '_0').files[0]
        formData.append('file' + i + '_0', file0)
        if (isAndroid) {
          var file1 = document.getElementById('file' + i + '_1').files[0]
          var file2 = document.getElementById('file' + i + '_2').files[0]
          formData.append('file' + i + '_1', file1)
          formData.append('file' + i + '_2', file2)
        }
        screens.push(screen)
      }
      formData.append('screens', JSON.stringify(screens))
      this.xAddScreens(formData)
        .then(() => {
          this.xShowMsg({
            type: 'info',
            content: '提交成功'
          })
          setTimeout(() => {
            this.$route.router.go('/')
          }, 3000)
        })
        .catch((res) => {
          this.xShowMsg({
            type: 'danger',
            content: res.error_msg
          })
        })
    },
    ready() {
      console.log('ready')
    }
  }
}
